<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <section class="table w-full overflow-hidden">
      <el-table class="overflow-hidden" height="300"
        :header-cell-style="{ backgroundColor: '#f2f2f2', fontWeight: 700, color: '#909399' }" :data="demoData"
        :stripe="true" :show-overflow-tooltip="true" v-on:cell-dblclick="handleCellDblclick">
        <el-table-column align="left" type="index" label="图库标识" width="110" prop="imgLibId" />
        <el-table-column align="left" label="图库ID" prop="id">
          <!-- <template #default="scope">
              <span class="hidden"></span>
            </template> -->
        </el-table-column>
        <el-table-column align="left" label="名称" prop="name" />
        <el-table-column align="left" label="类型" prop="type" :formatter="formatterType" />
        <el-table-column align="left" label="权限" prop="auth" :formatter="formatterAuth" />
        <el-table-column align="left" label="描述" prop="desc" />
        <el-table-column align="left" width="140" label="已标注/图片数" prop="" :formatter="formatterCount" />
        <el-table-column align="left" label="应用项目" prop="apply" />
        <el-table-column align="left" label="创建人" prop="creator" />
        <el-table-column align="left" label="创建时间" width="166" :formatter="formatterTime" prop="createTime" />
        <!-- <el-table-column align="left" label="最近更新时间"  prop="lastUpdateTime" /> -->
        <!-- <el-table-column align="left" label="操作" fixed="right" prop="action"> -->
        <!-- <template #default="scope">
              <el-button v-if="" link type="primary" @click=""> 编辑 </el-button>
              <el-button v-if="" link type="primary" @click=""> 删除 </el-button>
            </template> -->
        <!-- </el-table-column> -->
      </el-table>
      <!-- 分页组件 -->
      <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="total > 0" :total="total"
        v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" @pagination="getList" />
    </section>
    <template #footer>
      <el-button @click="closeModal">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { cates } from '@/utils/a-common';

import { onMounted } from 'vue';
import { getGalleryPage, deleteGallery } from '@/api/gallery-upload/index'


const { dbClickData } = defineProps({
  dbClickData: Function
})

const dialogTitle = ref('双击选择图库')
const dialogVisible = ref(false)
let queryParams = reactive({
  createTime: [],
  imgType: '',
  search: '',
  pageSize: 10,
  pageNo: 1
})

const demoData = ref([])
let total = ref(0)

const formatterCount = (row, column, cellValue, index) => {
  return `${row.markNum}/${row.imageCount}`
}

const formatterType = (row, column, cellValue, index) => {
  const filter = cates.find((item) => item.value == cellValue)
  return filter?.label
}
const formatterAuth = (row, column, cellValue, index) => {
  return cellValue == '1' ? '公开' : '私有'
}

const formatterTime = (row, column, cellValue, index) => {
  return formatDate(cellValue)
}

const handleCellDblclick = (row: any) => {
  // console.log(row)
  dbClickData!(row)
  dialogVisible.value = false
}

const closeModal = () => {
  dialogVisible.value = false
}

const open = () => {
  dialogVisible.value = true
}

defineExpose({ open })

const getList = async () => {
  const res = await getGalleryPage(queryParams)
  if (res) {
    demoData.value = res.list
    total.value = res.total
  }
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>
